<template>
  <div>

 <!-- 导航栏 -->
 <van-nav-bar title="登 录" >
  <template #left>
    <van-icon name="cross"  size="20"/>
  </template>
  <template #right>
    <i class="iconfont icon-nav_ico_menu_h"></i>
  </template>
</van-nav-bar>
<!-- form -->
<div class="form1">
  <van-form @submit="onSubmit" >
  <van-field
  label-width="42"
    v-model="username"
    name="账号"
    label="账号："
    :rules="[{ required: true, message: '请填写用户名' }]"
  />
  <van-field
    v-model="password"
    label-width="42"
    type="password"
    name="密码"
    label="密码："
    :rules="[{ required: true, message: '请填写密码' }]"
  />
  <div style="margin: 16px;">
    <van-button round block type="info" native-type="submit">登录</van-button>
  </div>
</van-form>
</div>



  </div>
</template>

<script>
import navgatior from '../components/navgatior.vue'
export default {
  components: {
    navgatior
  },
  data() {
    return {
      username: 123,
      password: 123,
     
    }
  },
  methods: {
    onClickLeft() {
      
    },
    onClickRight() {
      
    },
    onSubmit() {
      
    }
  }
}
</script>

<style scoped lang="less">

 .van-form {
  padding: 25px;
  margin-top: 10px;
 }

 .van-nav-bar{
  background-color: #101010;
 }
 .iconfont {
  color: white;
 }
 ::v-deep .van-nav-bar__title {
  color: white;
 }


::v-deep .van-field__control {
  border: 1px solid #f2f2f2;
  border-radius: 7px;
  height: 40px;
  border: 2.5px solid #f2f2f2;
}
.van-cell  {
  line-height: 2.5rem;
}
.van-cell__title van-field__label span {
  color: #b0b0b0;
}
.van-cell::after {
  border-bottom:  0px solid white;
}
.van-button--block {
  width: 93%;
  margin-left: 15px;
  margin-top: 30px;
  background-image: linear-gradient(#f87d44,#fe9a5c);
  border-color: #fc8f53;
}
</style>